<html>
<head><title>Twitch + Video</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=1.0, user-scalable=yes" />
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<style>
body{
	padding:0;
	margin:0;
	background-color:#003;
	width:100%;
	height:100%;
}

iframe {
	width:100%;
	height:100%;
	border:0;
	margin:0;
	padding:0;
	position:absolute;
	display:block;
}


input{
	padding:10px;
	width:80%;
	font-size:1.2em;
	z-index: 1000;
}

h1{
	color: white;
    font-family: verdana;
    margin: 10px;
}
@media screen and (orientation:portrait) {
	#container2{
		width:100%;height:100%;display:none;
	}
	#container1{
		width: 50vw;height: 50vh; display:none; float:left; position: fixed; top: 0; right: 0%;
	}
	iframe{
		width:100%;
	}
}

@media screen and (orientation:landscape) {
	#container2{
		width:60vw;height:100%;display:none;
		z-index:5;
	}
	#container1{
		width: 50vw;height: 80vh; display:none; float:left; position: fixed; top: 0; right: -10vw;
	}
	iframe{
		max-width:60vw;
	}
}

</style>
</head>
<body>



<div id="container2"></div>
<div id="container1" ></div>
<div id="clean">
	<h1>Use VDO.Ninja and Twitch chat at the same time</h1>
	<input placeholder="Enter a VDON stream ID or VDON URL" id="viewlink" type="text" />
	<input placeholder="Enter the Twitch channel name" id="twitch" type="text" />
	<button onclick="loadIframes()" style="display:block;padding:10px;margin:10px;">START</button>
</div>
<script>

window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
 // alert(window.orientation);
}, false);

function removeStorage(cname){
	localStorage.removeItem(cname);
}

function setStorage(cname, cvalue, hours=9999){ // not actually a cookie
	var now = new Date();
	var item = {
		value: cvalue,
		expiry: now.getTime() + (hours * 60 * 60 * 1000),
	};
	try{
		localStorage.setItem(cname, JSON.stringify(item));
	}catch(e){errorlog(e);}
}

function getStorage(cname) {
	try {
		var itemStr = localStorage.getItem(cname);
	} catch(e){
		errorlog(e);
		return;
	}
	if (!itemStr) {
		return "";
	}
	var item = JSON.parse(itemStr);
	var now = new Date();
	if (now.getTime() > item.expiry) {
		localStorage.removeItem(cname);
		return "";
	}
	return item.value;
}
if (getStorage("twitchChatLink")){
	document.getElementById("twitch").value = getStorage("twitchChatLink");
}
if (getStorage("vdoNinjaTwitchURL")){
	document.getElementById("viewlink").value = getStorage("vdoNinjaTwitchURL");
}

function loadIframes(url=false){ 

	var roomname = document.getElementById("viewlink").value;
	var twitch = document.getElementById("twitch").value;
	
	document.getElementById("clean").parentNode.removeChild(document.getElementById("clean"));
	document.getElementById("container1").style.display="inline-block";
	document.getElementById("container2").style.display="inline-block";
	
	var path = window.location.host+window.location.pathname.split("/").slice(0,-1).join("/");
	path = path.replace("/examples","");
	
	if (roomname.startsWith("https://")){
		var room1 = roomname;
	} else {
		var room1 = "https://"+path+"/?push="+roomname+"&webcam&autostart&vd=front&ad=1&transparent&noheader";
	}
	var room2 = "https://www.twitch.tv/embed/"+twitch+"/chat?parent="+location.hostname;
	var iframe = document.createElement("iframe");
	iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
	iframe.src = room1;
	var iframeContainer = document.createElement("div");
	iframeContainer.appendChild(iframe);
	document.getElementById("container1").appendChild(iframeContainer);
	
	
	setStorage("twitchChatLink", room2);

	setStorage("vdoNinjaTwitchURL", room1);
	
	
	setTimeout(function(){
		var iframe = document.createElement("iframe");
		iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
		iframe.src = room2;
		var iframeContainer = document.createElement("div");
		iframeContainer.appendChild(iframe);
		document.getElementById("container2").appendChild(iframeContainer);
	},3000);
	
}

</script>
</body>
</html>